<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bigbox {
            display: flex;
        }

        .left {
            width: 200px;
            background-color: rgb(44, 41, 41);
            color: white;
            height: 100%;
            padding: 0 10px;
            text-align: center;
        }

        .left .topic .dash1 {
            margin-top: 20px;
            background-color: rgb(0, 94, 255);
            border-radius: 5px;
        }

        .left .topic .dash3 {
            margin-top: 20px;
            background-color: rgb(194, 198, 205);
            border-radius: 5px;
        }

        .left .top {
            height: 50px;
            border-bottom: 1px solid white;
            line-height: 50px;
        }

        .left .center {
            height: 60px;
            border-bottom: 1px solid white;
            line-height: 60px;
        }

        .left .topic {
            line-height: 35px;
        }

        .left .list {
            line-height: 35px;
        }

        .left .list .lizi {
            line-height: 50px;
        }

        .right {
            width: 1200px;
            background-color: rgb(237, 237, 231);
        }

        .nav {
            display: flex;
            width: 100%;
            background-color: white;
            align-items: center;
        }

        .nav span:nth-child(1) {
            margin-left: 50px;
        }

        .nav span:nth-child(2) {
            margin-left: 50px;
        }

        .nav .search {
            margin-left: 30px;
            width: 200px;
            height: 25px;
            border: 1px solid gray;
            background-color: rgba(240, 235, 235, 0.73);
            line-height: 25px;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
        }

        .firstline {
            display: flex;
            width: 100%;
            justify-content: space-between;
        }

        .firstline :nth-child(1) {
            margin-left: 10px;
        }

        .firstline :nth-child(2) {
            margin-right: 10px;
        }

        .topcharts {
            box-sizing: border-box;
            width: 1200px;
            height: 400px;
            display: flex;
            padding: 10px;
            justify-content: space-between;
        }

        .topcharts .topleft {
            width: 580px;
            height: 400px;
            border: 1px solid gray;
            background-color: white;
        }

        .topcharts .topleft .title {
            display: flex;
            justify-content: space-between;
            padding: 10px;
        }

        .topcharts .topleft .title :nth-child(1) {
            font-weight: 700;
        }

        .topcharts .topleft .title :nth-child(2) {
            color: blue;
        }

        .topcharts .topleft .box {
            width: 580px;
            height: 300px;
        }

        .topcharts .topright {
            width: 580px;
            height: 400px;
            border: 1px solid gray;
            background-color: white;
        }

        .topcharts .topright .title {
            display: flex;
            justify-content: space-between;
            padding: 10px;
        }

        .topcharts .topright .title :nth-child(1) {
            font-weight: 700;
        }

        .topcharts .topright .title :nth-child(2) {
            color: blue;
        }

        .topcharts .topright .box {
            width: 580px;
            height: 300px;
        }

        .bottomcharts {
            width: 1200px;
            box-sizing: border-box;
            display: flex;
            padding: 10px;
            margin-top: 20px;
            justify-content: space-between;
        }

        .bottomcharts .bottomleft {
            width: 580px;
            height: 100%;
            /* background-color: red; */
        }
        .bottomcharts .bottomleft table {
            width: 100%;
            text-align: left;
        }

        .bottomcharts .bottomright {
            width: 580px;
            height: 100%;
            /* background-color: greenyellow; */
        }

        .bottomcharts .bottomright table {
            width: 100%;
        }

        .bottomcharts .bottomright table :nth-child(1) {
            text-align: left;
        }

        .bottomcharts .bottomright table :nth-child(2) {
            text-align: right;
        }
    </style>
</head>

<body>
    <div class="bigbox">
        <div class="left">
            <div class="top">AdminLTE 3</div>
            <div class="center">Alexander Pierce</div>
            <div class="topic">
                <div class="dash1">Dashboard</div>
                <div>Dashboard v1</div>
                <div>Dashboard v2</div>
                <div class="dash3">Dashboard v3</div>
                <div>Widgets</div>
                <div>Charts</div>
                <div>UI Elements</div>
                <div>Forms</div>
                <div>Tables</div>
            </div>
            <div class="list">
                <div class="lizi">EXAMPLES</div>
                <div>Calendar</div>
                <div>Mailbox</div>
                <div>Pages</div>
                <div>Extras</div>
            </div>
        </div>
        <div class="right">
            <div class="nav">
                <span>Home</span>
                <span>Contact</span>
                <div class="search">
                    <span>Search</span>
                    <span>*</span>
                </div>
            </div>
            <div class="firstline">
                <div>Dashboard v3</div>
                <div>
                    <span>Home</span>
                    <span> / Dashboard v3 </span>
                </div>
            </div>
            <div class="topcharts">
                <div class="topleft">
                    <div class="title">
                        <div>Online Store Visitors</div>
                        <div>View Report</div>
                    </div>
                    <div class="box"></div>
                </div>
                <div class="topright">
                    <div class="title">
                        <div>sales</div>
                        <div>View Report</div>
                    </div>
                    <div class="box"></div>
                </div>
            </div>
            <div class="bottomcharts">
                <div class="bottomleft">
                    <p>products</p>
                    <span class="iconfont"></span>
                    <span class="iconfont"></span>
                    <table>
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Price</th>
                                <th>Sales</th>
                                <th>More</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr> -->
                        </tbody>
                    </table>
                </div>
                <div class="bottomright">
                    <p>Online Store Overview</p>
                    <span class="iconfont"></span>
                    <span class="iconfont"></span>
                    <table>
                        <!-- <tr>
                            <td class="iconfont">*</td>
                            <td>CONVERSION RATE</td>
                        </tr>
                        <tr>
                            <td class="iconfont">*</td>
                            <td>SALES RATE</td>
                        </tr> -->
                    </table>
                </div>
            </div>
        </div>
    </div>

</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="./mock copy.js"></script>
<script src="./mock data.js"></script>
<script>
    var con = document.querySelector('.topcharts .topleft .box')
    var e = echarts.init(con)
    // 2、绘制图标
    e.setOption({
        title: {
            text: 'visitor over time',//标题
            left: 'left',//标题居中
        },
        legend: {//图例
            name: ['This week', 'Last week'],
            top: 280,
            right: 50
        },
        xAxis: {
            data: ['18th', '20th', '22nd', "24th", '26th', '28th', '30th']
        },//x轴设置
        yAxis: {
            axisLine: { show: true },
            min: 0,
            max: 200,
            splitNumber: 10,
            splitLine: {
                show: true
            }
        },//y轴设置
        series: [//数据系列
            {
                name: 'This week',
                type: 'line',//'line'折线图,'bar'柱状图,'pie'饼状图
                symbolSize: 6,//圆点大小
                symbol: 'circle',//圆点的形状
                smooth: true,//平滑曲线
                itemStyle: {
                    normal: {
                        color: 'aqua',//线和实心圆点的颜色
                        borderWidth: '10',//圆点的边框宽度
                        lineStyle: { width: 3 },//折线的宽度
                        shadowBlur: 5,//阴影大小
                        shadowColor: 'gray',//阴影颜色

                    }
                },
                data: [100, 120, 70, 97, 44, 190, 150]//根据这组数据中的最大值，默认作为x和y轴的刻度
            },
            {
                name: 'Last week',
                type: 'line',//'line'折线图,'bar'柱状图,'pie'饼状图
                symbolSize: 6,//圆点大小
                symbol: 'circle',//圆点的形状
                smooth: true,//平滑曲线
                itemStyle: {
                    normal: {
                        color: 'gray',//线和实心圆点的颜色
                        borderWidth: '10',//圆点的边框宽度
                        lineStyle: { width: 3 },//折线的宽度
                        shadowBlur: 5,//阴影大小
                        shadowColor: 'gray',//阴影颜色

                    }
                },
                data: [40, 60, 30, 69, 150, 130, 180]//根据这组数据中的最大值，默认作为x和y轴的刻度
            }
        ]
    })
    var con1 = document.querySelector('.topcharts .topright .box')
    var e1 = echarts.init(con1)
    e1.setOption({
        title: {
            text: 'sales over time',//标题
            left: 'left',//标题居中
        },
        legend: {//图例
            name: ['This year', 'Last year'],
            top: 280,
            right: 50
        },
        xAxis: {
            data: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
        },//x轴设置
        yAxis: {
            axisLine: { show: true },
            min: 0,
            max: 3,
            splitNumber: 3,
            splitLine: {
                show: true
            },
            type: 'value',
            axisLabel: {
                show: true,
                formatter: '${value}k',
            }
        },//y轴设置
        series: [//数据系列
            {
                name: 'This year',
                barWidth: 20,//柱子的宽度
                // showBackground:true,//显示背景色
                // backgroundStyle:{//改背景色的样式
                //     color:'white',
                // },
                // itemStyle:{
                //     borderRadius:[10,10,0,0],//改圆角
                // },
                color: 'rgb(0,123,255)',//纯色
                // color:'',=渐变色--复制粘贴
                type: 'bar',//'line'折线图,'bar'柱状图,'pie'饼状图
                data: [1, 1.2, 0.7, 2.7, 1.4, 1.9, 1.5]//根据这组数据中的最大值，默认作为x和y轴的刻度
            },
            {
                name: 'Last year',
                barWidth: 20,//柱子的宽度
                // showBackground:true,//显示背景色
                // backgroundStyle:{//改背景色的样式
                //     color:'white',
                // },
                // itemStyle:{
                //     borderRadius:[10,10,0,0],//改圆角
                // },
                color: 'gainsboro',//纯色
                // color:'',=渐变色--复制粘贴
                type: 'bar',//'line'折线图,'bar'柱状图,'pie'饼状图
                data: [0.4, 0.6, 3, 1.9, 1.5, 1.3, 1.8]//根据这组数据中的最大值，默认作为x和y轴的刻度
            },
        ]
    })
    
    render(data.list)
    function render(data) {
        var str = data.map((item, index) => {
            return ` <tr>
                        <td class='product'>${item.product}</td>
                        <td class='price'>${item.price}</td>
                        <td class='sales'>${item.sales}</td>
                        <td>*</td>
                    </tr>`
        }).join('')
        document.querySelector('.bottomcharts .bottomleft table tbody').innerHTML = str;
    }

    render1(data1.list)
    function render1(data1) {
        var str = data1.map((item, index) => {
            return ` <tr>
                            <td class="iconfont">*</td>
                            <td class="xxx">${item.xxx}</td>
                    </tr>`
        }).join('')
        document.querySelector('.bottomcharts .bottomright table').innerHTML = str;
    }
</script>